<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>条件渲染</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!--1. 使用v-show作条件渲染：实际上设置了隐藏属性 -->
            <h1 v-show="1 === 3">HELLO!{{name}}</h1>
            <h1 v-show="isShow">HELLO!{{name}}</h1>

            <!--2. 使用v-if作条件渲染：真正的删除了DOM元素，效率低于v-show -->
            <h1 v-if="1 === 3">HELLO!{{name}}</h1>
            <h1 v-if="isShow">HELLO!{{name}}</h1>

            <h2>n的值：{{n}}</h2>
            <button @click="n++">点我n++</button>
            <!-- <div v-show="n === 1">Augaler</div>
            <div v-show="n === 2">react</div>
            <div v-show="n === 3">Vue</div> -->

            <!--3. v-if和v-else-if是一组，当走了v-if，下面的v-else-if就不会再进行判断了，最后的v-else就不需要再写条件了，写了也没用 -->
            <div v-if="n === 1">Augaler</div>
            <div v-else-if="n === 1">react</div>
            <!-- v-if和v-else-if、v-else不允许打断，否则后面的就不会生效了 -->
            <!-- <div>@@</div>  -->
            <div v-else-if="n === 3">Vue</div>
            <div v-else>哈哈哈</div>

            <!--4. 如果要使用多个判断，且不改变结构，可以使用模板 
                注意template只能和v-if配合使用，不能和v-show一起使用
                <h1 v-if="n === 3">HELLO!Augaler</h1>
                <h1 v-if="n === 3">HELLO!react</h1>
                <h1 v-if="n === 3">HELLO!Vue</h1>-->
            <template v-if="n === 3">
                <h1 v-if="n === 3">HELLO!Augaler</h1>
                <h1 v-if="n === 3">HELLO!react</h1>
                <h1 v-if="n === 3">HELLO!Vue</h1>
            </template>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示，不起作用，直接改了vue.js中的值
            // 创建Vue实例
            new Vue({
                el:'#root', 
                data:{  
                    name:'张三',
                    isShow:true,
                    n:0
                }
            })
        </script>

        
    </body>
</html>